{% extends 'layouts/default/page.html' %}

{% load bootstrap4 %}
{% load i18n %}

{% block content %}

{% if user.is_authenticated %}
<div class="container mt-5">
    <div class="row">
        <div class="col-12 text-center mb-4">
            <h1 class="display-4">{% trans 'Uploaded Files' %}</h1>
        </div>
    </div>

    <div class="list-group">
        {% for file in page_obj %}
        <div class="list-group-item d-flex justify-content-between align-items-center">
            <div class="file-info">
                <h5 class="mb-1">{{ file.name }}</h5>
            </div>
            <div class="file-preview ml-3">
                <img src="{{ file.file.url }}" alt="{{ file.name }}" class="img-thumbnail" style="max-width: 100px;">
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- 分页导航 -->
    <nav aria-label="Page navigation" class="mt-4">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            {% endif %}
            
            {% for num in page_obj.paginator.page_range %}
                <li class="page-item {% if page_obj.number == num %}active{% endif %}">
                    <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                </li>
            {% endfor %}
            
            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            {% endif %}
        </ul>
    </nav>

</div>
{% else %}
<div class="alert alert-warning">
    您还未登录。
</div>
{% endif %}

{% endblock %}
